<template>
  <div>
   <!-- <button v-if="isShow" open-type="getUserInfo"
    @click="getUserInfo" type="primary">授权登录</button>
    <div v-else>
        <img src="">
        <p>欢迎你</p>
    </div> -->
    <!-- /登录窗口 -->
    <div v-if="buttonVisible" class="container-login">
        <button  open-type="getUserInfo" @getuserinfo="bindGetUserInfo"
     @click="getUserInfoClick" class="container-login-btn" >请登录</button>
    </div>
    <!-- 登录后信息展示 -->
    <div v-else class="container">
        <div class="my-head">
        <img :src="UserInfo.avatarUrl" class="my-head-img">
        {{UserInfo.nickName}}
        </div>
    </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      UserInfo: {},
      isShow:true,
      buttonVisible:true,
      canIUse: wx.canIUse('button.open-type.getUserInfo')

    }
  },
  mounted () {
    const self = this;
    wx.login({
        success (res) {
            if (res.code){
                self.code = res.code;
                self.wxGetUserInfo(res.code);
            }
        },
    })
},
  methods: {
      wxGetUserInfo (code) {
            wx.getSetting({
           success(res) {
           if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
             wx.getUserInfo({
                success(res) {
                 console.log('授权成功')
                }
          })
        }
      }
    })
    },
    bindGetUserInfo(e) {
        // console.log('回调事件后触发')
        const self = this;
        if (e.mp.detail.userInfo){
            this.buttonVisible=false
            console.log('用户按了允许授权按钮')
            this.UserInfo=e.mp.detail.userInfo //将获取的用户授权后的信息保存到data中
            console.log(this.UserInfo)
            // let { encryptedData,userInfo,iv } = e.mp.detail;
            // self.$http.post(api,{
            //     // 这里的code就是通过wx.login()获取的
            //     code:self.code,
            //     encryptedData,
            //     iv,
            // }).then(res => {
            //     console.log(`后台交互拿回数据:`,res);
            //     // 获取到后台重写的session数据，可以通过vuex做本地保存
            // }).catch(err => {
            //     console.log(`api请求出错:`,err);
            // })  
        } else {
            //用户按了拒绝按钮
            console.log('用户按了拒绝按钮');
        }
    },
    
    // getUserInfo () {
    //     wx.getUserInfo({
    //       success: (data) => {
    //         console.log(data)
    //         // 更新data中的数据
    //         this.UserInfo = data.userInfo
    //         this.isShow = true
    //         console.log(this.UserInfo)
    //       },
    //       fail: () => {
    //         console.log('获取失败')
    //       }
    //     })
    //   },
    //   getUserInfo (data) {
    //     console.log(data)
    //     // 判断用户是否授权
    //     if (data.mp.detail.rawData) {
    //       // 用户授权
    //     }
    //   }

      
  }
}
</script>
<style>
.container-login{
    width: 90%;
    height: 100%;
    border: 1rpx solid black
}
/* 登录按钮样式 */
.container-login-btn{
    width: 40%;
    height: 100rpx;
    background: white;
    align-content: center;
    padding: 5rpx;
}
/* 头像样式 */
.my-head-img{
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%
}
.my-head{
 width: 80;
 height: 50rpx;
 font-size: 28rpx;
 font-weight: 100rpx;
}
</style>


